<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Cascader | Element Plus</title>
    <meta name="description" content="A Vue 3 based component library for designers and developers">
    <link rel="stylesheet" href="/assets/style.e2a9e121.css">
    <link rel="modulepreload" href="/assets/chunks/panel.b3e5ae24.js">
    <link rel="modulepreload" href="/assets/chunks/contributors.b1907dec.js">
    <link rel="modulepreload" href="/assets/app.9c6c24e4.js">
    <link rel="modulepreload" href="/assets/en-US_component_cascader.md.bf8dbc75.lean.js">
    
    <link rel="icon" href="/images/element-plus-logo-small.svg" type="image/svg+xm">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="theme-color" content="#ffffff">
  <meta name="msapplication-TileColor" content="#409eff">
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta property="og:image" content="/images/element-plus-og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:description" content="A Vue 3 based component library for designers and developers">
  <script>window.supportedLangs=["en-US","es-ES","zh-CN"];</script>
  <script>(()=>{const o=window.supportedLangs,a="preferred_lang",r="en-US",s={en:"en-US",fr:"fr-FR",es:"es-ES"};let e=localStorage.getItem(a)||navigator.language;const n=s[e]||(o.includes(e)?e:r);if(localStorage.setItem(a,n),e=n,!location.pathname.startsWith(`/${e}`)){const t=[`/${e}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=t.endsWith(".html")||t.endsWith("/")?t:t.concat("/")}navigator&&navigator.serviceWorker.controller&&navigator.serviceWorker.controller.postMessage({type:"LANG",lang:e})})();</script>
  <script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
  <script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(o){console.log(o)}).catch(function(o){console.log(o)});</script>
  <script async="true">window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
  <script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-M74ZHEQ1M1"></script>
  <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-M74ZHEQ1M1");</script>
  <script async="true">var resource=document.createElement("link");resource.setAttribute("rel","stylesheet"),resource.setAttribute("href","https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800|Open+Sans:400,600;display=swap"),resource.setAttribute("type","text/css");var head=document.querySelector("head");head.appendChild(resource);</script>
  <script>(()=>{const e=localStorage.getItem("el-theme-appearance");(e==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <meta name="twitter:title" content="Cascader | Element Plus">
  <meta property="og:title" content="Cascader | Element Plus">
  </head>
  <body>
    <div id="app"><div class="App"><!--[--><span tabindex="-1" data-v-d2e1b550></span><a href="#page-content" class="skip-link visually-hidden" data-v-d2e1b550>Skip to content</a><!--]--><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-74f3ae96><div class="header-container" data-v-74f3ae96><div class="logo-container" data-v-74f3ae96><a href="/en-US/" data-v-74f3ae96><img class="logo" src="/images/element-plus-logo.svg" alt="Element Plus Logo" data-v-74f3ae96></a></div><div class="content" data-v-74f3ae96><div id="docsearch" class="algolia-search-box search" data-v-74f3ae96></div><nav class="navbar-menu menu" data-v-74f3ae96><!--[--><a class="link-item link is-menu-link" href="/en-US/guide/design" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->Guide<!--]--><!--]--><!----></a><a class="link-item link is-menu-link active" href="/en-US/component/overview" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->Component<!--]--><!--]--><!----></a><a class="link-item link is-menu-link" href="/en-US/resource/index" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->Resource<!--]--><!--]--><!----></a><!--]--></nav><div class="theme-toggler-content theme-toggler" data-v-74f3ae96 data-v-b1b91f92><div aria-label="toggle dark mode" aria-checked="false" data-v-b1b91f92 data-v-0180af72><!----></div></div><div class="translation-container translation" data-v-74f3ae96 data-v-12008bb2><!----></div><div class="social-links" data-v-74f3ae96 data-v-76aa5200><!--[--><a href="https://github.com/element-plus/element-plus" title="GitHub" target="_blank" rel="noreferrer noopener" class="social-link" data-v-76aa5200 data-v-72eabb9c><i class="el-icon" style="font-size:24px;" data-v-72eabb9c><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72eabb9c><path fill="currentColor" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"></path></svg><!--]--></i></a><!--]--></div><button class="reset-btn menu-hamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="full-screen" data-v-74f3ae96><span class="hamburger-1"></span><span class="hamburger-2"></span><span class="hamburger-3"></span></button></div></div></div><!----></header><div class="sub-nav py-3 flex items-center"><button class="reset-btn sidebar-button flex items-center" aria-expanded="false"><i class="el-icon mr-2" style="font-size:20px;"><!--[--><svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="7" width="11" height="2" fill="#606266"></rect><rect x="2" y="11" width="14" height="2" fill="#606266"></rect><rect x="2" y="15" width="8" height="2" fill="#606266"></rect><rect x="2" y="3" width="16" height="2" fill="#606266"></rect></svg><!--]--></i><span class="leading-6">Menu</span></button><button ariadisabled="false" type="button" class="el-button is-link go-back-top height-5" style=""><!--v-if--><span class=""><!--[--> Back to top <!--]--></span></button></div><div class="el-scrollbar sidebar"><div class="el-scrollbar__wrap el-scrollbar__wrap--hidden-default" style=""><div class="el-scrollbar__view" style=""><!--[--><aside><!--[--><div class="page-content-main-b" data-v-0407b15a><p class="title" data-v-0407b15a>Sponsored by</p><div data-v-0407b15a data-v-23d0a532><!--[--><a href="https://melecode.com/" title="美乐 - 企业级全栈低代码开发平台" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/mele-banner.png" alt="美乐" data-v-23d0a532></a><a href="https://vform666.com/" title="VForm - Vue 2/3 可视化低代码表单" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/vform-banner.png" alt="VForm" data-v-23d0a532></a><a href="https://www.jnpfsoft.com/index.html?from=elementUI" title="JNPF - JNPF 低代码开发平台，让开发变得简单！" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/jnpfsoft.jpg" alt="JNPF" data-v-23d0a532></a><!--]--></div><div data-v-0407b15a data-v-97807a40><!--[--><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Overview</p><!--[--><a class="link" href="/en-US/component/overview" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Overview</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Basic</p><!--[--><a class="link" href="/en-US/component/button" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Button</p><!----></a><a class="link" href="/en-US/component/border" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Border</p><!----></a><a class="link" href="/en-US/component/color" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Color</p><!----></a><a class="link" href="/en-US/component/container" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Layout Container</p><!----></a><a class="link" href="/en-US/component/icon" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Icon</p><!----></a><a class="link" href="/en-US/component/layout" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Layout</p><!----></a><a class="link" href="/en-US/component/link" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Link</p><!----></a><a class="link flex items-center" href="/en-US/component/text" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Text</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.3.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/scrollbar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Scrollbar</p><!----></a><a class="link" href="/en-US/component/space" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Space</p><!----></a><a class="link" href="/en-US/component/typography" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Typography</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Configuration</p><!--[--><a class="link" href="/en-US/component/config-provider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Config Provider</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form</p><!--[--><a class="link" href="/en-US/component/autocomplete" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Autocomplete</p><!----></a><a class="link active" href="/en-US/component/cascader" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Cascader</p><!----></a><a class="link" href="/en-US/component/checkbox" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Checkbox</p><!----></a><a class="link" href="/en-US/component/color-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Color Picker</p><!----></a><a class="link" href="/en-US/component/date-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Date Picker</p><!----></a><a class="link" href="/en-US/component/datetime-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>DateTime Picker</p><!----></a><a class="link" href="/en-US/component/form" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Form</p><!----></a><a class="link" href="/en-US/component/input" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Input</p><!----></a><a class="link" href="/en-US/component/input-number" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Input Number</p><!----></a><a class="link" href="/en-US/component/radio" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Radio</p><!----></a><a class="link" href="/en-US/component/rate" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Rate</p><!----></a><a class="link" href="/en-US/component/select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Select</p><!----></a><a class="link" href="/en-US/component/select-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Select</p><!----></a><a class="link" href="/en-US/component/slider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Slider</p><!----></a><a class="link" href="/en-US/component/switch" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Switch</p><!----></a><a class="link" href="/en-US/component/time-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Time Picker</p><!----></a><a class="link" href="/en-US/component/time-select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Time Select</p><!----></a><a class="link" href="/en-US/component/transfer" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Transfer</p><!----></a><a class="link flex items-center" href="/en-US/component/tree-select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>TreeSelect</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.1.8<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/upload" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Upload</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data</p><!--[--><a class="link" href="/en-US/component/avatar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Avatar</p><!----></a><a class="link" href="/en-US/component/badge" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Badge</p><!----></a><a class="link" href="/en-US/component/calendar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Calendar</p><!----></a><a class="link" href="/en-US/component/card" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Card</p><!----></a><a class="link" href="/en-US/component/carousel" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Carousel</p><!----></a><a class="link" href="/en-US/component/collapse" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Collapse</p><!----></a><a class="link" href="/en-US/component/descriptions" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Descriptions</p><!----></a><a class="link" href="/en-US/component/empty" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Empty</p><!----></a><a class="link" href="/en-US/component/image" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Image</p><!----></a><a class="link" href="/en-US/component/infinite-scroll" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Infinite Scroll</p><!----></a><a class="link" href="/en-US/component/pagination" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Pagination</p><!----></a><a class="link" href="/en-US/component/progress" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Progress</p><!----></a><a class="link" href="/en-US/component/result" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Result</p><!----></a><a class="link" href="/en-US/component/skeleton" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Skeleton</p><!----></a><a class="link" href="/en-US/component/table" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Table</p><!----></a><a class="link flex items-center" href="/en-US/component/table-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Table</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.2.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/tag" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tag</p><!----></a><a class="link" href="/en-US/component/timeline" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Timeline</p><!----></a><a class="link flex items-center" href="/en-US/component/tour" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tour</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.5.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/tree" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tree</p><!----></a><a class="link" href="/en-US/component/tree-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Tree</p><!----></a><a class="link flex items-center" href="/en-US/component/statistic" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Statistic</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.2.30<!--]--></span><!--v-if--></span></a><a class="link flex items-center" href="/en-US/component/segmented" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Segmented</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.7.0<!--]--></span><!--v-if--></span></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation</p><!--[--><a class="link" href="/en-US/component/affix" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Affix</p><!----></a><a class="link flex items-center" href="/en-US/component/anchor" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Anchor</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.6.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/backtop" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Backtop</p><!----></a><a class="link" href="/en-US/component/breadcrumb" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Breadcrumb</p><!----></a><a class="link" href="/en-US/component/dropdown" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Dropdown</p><!----></a><a class="link" href="/en-US/component/menu" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Menu</p><!----></a><a class="link" href="/en-US/component/page-header" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Page Header</p><!----></a><a class="link" href="/en-US/component/steps" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Steps</p><!----></a><a class="link" href="/en-US/component/tabs" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tabs</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback</p><!--[--><a class="link" href="/en-US/component/alert" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Alert</p><!----></a><a class="link" href="/en-US/component/dialog" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Dialog</p><!----></a><a class="link" href="/en-US/component/drawer" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Drawer</p><!----></a><a class="link" href="/en-US/component/loading" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Loading</p><!----></a><a class="link" href="/en-US/component/message" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Message</p><!----></a><a class="link" href="/en-US/component/message-box" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Message Box</p><!----></a><a class="link" href="/en-US/component/notification" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Notification</p><!----></a><a class="link" href="/en-US/component/popconfirm" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Popconfirm</p><!----></a><a class="link" href="/en-US/component/popover" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Popover</p><!----></a><a class="link" href="/en-US/component/tooltip" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tooltip</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others</p><!--[--><a class="link" href="/en-US/component/divider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Divider</p><!----></a><a class="link flex items-center" href="/en-US/component/watermark" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Watermark</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.4.0<!--]--></span><!--v-if--></span></a><!--]--></section><!--]--></div><!--[--><!--]--></aside><!--]--></div></div><!--[--><div class="el-scrollbar__bar is-horizontal" style="display:none;"><div class="el-scrollbar__thumb" style="width:;transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical" style="display:none;"><div class="el-scrollbar__thumb" style="height:;transform:translateY(0%);"></div></div><!--]--></div><main id="page-content" class="page-content has-sidebar"><div class="doc-content-wrapper"><div class="doc-content-container"><div style="position:relative;" class="doc-content"><div><h1 id="cascader" tabindex="-1">Cascader <a class="header-anchor vp-link" href="#cascader" aria-hidden="true">#</a></h1><p>If the options have a clear hierarchical structure, Cascader can be used to view and select them.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>This component requires the <code>&lt;client-only&gt;&lt;/client-only&gt;</code> wrap when used in SSR (eg: <a href="https://nuxt.com/v3" class="vp-link" target="_blank" rel="noopener noreferrer">Nuxt<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a>) and SSG (eg: <a href="https://vitepress.vuejs.org/" class="vp-link" target="_blank" rel="noopener noreferrer">VitePress<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a>).</p></div><h2 id="basic-usage" tabindex="-1">Basic usage <a class="header-anchor vp-link" href="#basic-usage" aria-hidden="true">#</a></h2><p>There are two ways to expand child option items.</p><!----><h2 id="disabled-option" tabindex="-1">Disabled option <a class="header-anchor vp-link" href="#disabled-option" aria-hidden="true">#</a></h2><p>Disable an option by setting a <code>disabled</code> field in the option object.</p><!----><h2 id="clearable" tabindex="-1">Clearable <a class="header-anchor vp-link" href="#clearable" aria-hidden="true">#</a></h2><p>Set <code>clearable</code> attribute for <code>el-cascader</code> and a clear icon will appear when selected and hovered</p><!----><h2 id="display-only-the-last-level" tabindex="-1">Display only the last level <a class="header-anchor vp-link" href="#display-only-the-last-level" aria-hidden="true">#</a></h2><p>The input can display only the last level instead of all levels.</p><!----><h2 id="multiple-selection" tabindex="-1">Multiple Selection <a class="header-anchor vp-link" href="#multiple-selection" aria-hidden="true">#</a></h2><p>Add <code>:props=&quot;props&quot;</code> in tag and set data <code>props = { multiple: true }</code> to use multiple selection.</p><p>Do:</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-cascader</span> <span class="token attr-name">:props</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>props<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">multiple</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>Don&#39;t do:</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--  Object literal binging here is invalid syntax for cascader  --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-cascader</span> <span class="token attr-name">:props</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ multiple: true }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!----><h2 id="select-any-level-of-options" tabindex="-1">Select any level of options <a class="header-anchor vp-link" href="#select-any-level-of-options" aria-hidden="true">#</a></h2><p>In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.</p><!----><h2 id="dynamic-loading" tabindex="-1">Dynamic loading <a class="header-anchor vp-link" href="#dynamic-loading" aria-hidden="true">#</a></h2><p>Dynamic load its child nodes when checked a node.</p><!----><h2 id="filterable" tabindex="-1">Filterable <a class="header-anchor vp-link" href="#filterable" aria-hidden="true">#</a></h2><p>Search and select options with a keyword.</p><!----><h2 id="custom-option-content" tabindex="-1">Custom option content <a class="header-anchor vp-link" href="#custom-option-content" aria-hidden="true">#</a></h2><p>You can customize the content of cascader node.</p><!----><h2 id="cascader-panel" tabindex="-1">Cascader panel <a class="header-anchor vp-link" href="#cascader-panel" aria-hidden="true">#</a></h2><p><code>CascaderPanel</code> is the core component of <code>Cascader</code> which has various of features such as single selection, multiple selection, dynamic loading and so on.</p><!----><h2 id="cascader-api" tabindex="-1">Cascader API <a class="header-anchor vp-link" href="#cascader-api" aria-hidden="true">#</a></h2><h3 id="cascader-attributes" tabindex="-1">Cascader Attributes <a class="header-anchor vp-link" href="#cascader-attributes" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>model-value / v-model</td><td>binding value</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span>/<span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span>/<span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>options</td><td>data of the options, the key of <code>value</code> and <code>label</code> can be customize by <code>CascaderProps</code>.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>props</td><td>configuration options, see the following <code>CascaderProps</code> table.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>size</td><td>size of input</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>—</td></tr><tr><td>placeholder</td><td>placeholder of input</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>disabled</td><td>whether Cascader is disabled</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>—</td></tr><tr><td>clearable</td><td>whether selected value can be cleared</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>—</td></tr><tr><td>show-all-levels</td><td>whether to display all levels of the selected value in the input</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>collapse-tags</td><td>whether to collapse tags in multiple selection mode</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>—</td></tr><tr><td>collapse-tags-tooltip</td><td>whether show all selected tags when mouse hover text of collapse-tags. To use this, <code>collapse-tags</code> must be true</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>separator</td><td>option label separator</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>&#39; / &#39;</td></tr><tr><td>filterable</td><td>whether the options can be searched</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>—</td></tr><tr><td>filter-method</td><td>customize search logic, the first parameter is <code>node</code>, the second is <code>keyword</code>, and need return a boolean value indicating whether it hits.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr><tr><td>debounce</td><td>debounce delay when typing filter keyword, in milliseconds</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span></td><td>300</td></tr><tr><td>before-filter</td><td>hook function before filtering with the value to be filtered as its parameter. If <code>false</code> is returned or a <code>Promise</code> is returned and then is rejected, filtering will be aborted</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr><tr><td>popper-class</td><td>custom class name for Cascader&#39;s dropdown</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>&#39;&#39;</td></tr><tr><td>teleported</td><td>whether cascader popup is teleported</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>popper-append-to-body <span class="vp-tag deprecated">deprecated</span></td><td>whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>tag-type</td><td>tag type</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>info</td></tr><tr><td>validate-event</td><td>whether to trigger form validation</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>max-collapse-tags <span class="vp-tag">2.3.10</span></td><td>The max tags number to be shown. To use this, <code>collpase-tags</code> must be true</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span></td><td>1</td></tr><tr><td>empty-values <span class="vp-tag">2.7.0</span></td><td>empty values of component, <a href="/en-US/component/config-provider.html#empty-values-configurations" class="vp-link">see config-provider</a></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">array</code><!----></span></td><td>—</td></tr><tr><td>value-on-clear <span class="vp-tag">2.7.0</span></td><td>clear return value, <a href="/en-US/component/config-provider.html#empty-values-configurations" class="vp-link">see config-provider</a></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr></tbody></table></div><h3 id="cascader-events" tabindex="-1">Cascader Events <a class="header-anchor vp-link" href="#cascader-events" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td>change</td><td>triggers when the binding value changes</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>expand-change</td><td>triggers when expand option changes</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>blur</td><td>triggers when Cascader blurs</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>focus</td><td>triggers when Cascader focuses</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>visible-change</td><td>triggers when the dropdown appears/disappears</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>remove-tag</td><td>triggers when remove tag in multiple selection mode</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr></tbody></table></div><h3 id="cascader-slots" tabindex="-1">Cascader Slots <a class="header-anchor vp-link" href="#cascader-slots" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Scope</th></tr></thead><tbody><tr><td>default</td><td>the custom content of cascader node, which are current Node object and node data respectively.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td></tr><tr><td>empty</td><td>content when there is no matched options.</td><td>—</td></tr></tbody></table></div><h3 id="cascader-exposes" tabindex="-1">Cascader Exposes <a class="header-anchor vp-link" href="#cascader-exposes" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td>getCheckedNodes</td><td>get an array of currently selected node,(leafOnly) whether only return the leaf checked nodes, default is <code>false</code></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>cascaderPanelRef</td><td>cascader panel ref</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td></tr><tr><td>togglePopperVisible <span class="vp-tag">2.2.31</span></td><td>toggle the visible type of popper</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>contentRef</td><td>cascader content ref</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td></tr></tbody></table></div><h2 id="cascaderpanel-api" tabindex="-1">CascaderPanel API <a class="header-anchor vp-link" href="#cascaderpanel-api" aria-hidden="true">#</a></h2><h3 id="cascaderpanel-attributes" tabindex="-1">CascaderPanel Attributes <a class="header-anchor vp-link" href="#cascaderpanel-attributes" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>model-value / v-model</td><td>binding value</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span>/<span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span>/<span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>options</td><td>data of the options, the key of <code>value</code> and <code>label</code> can be customize by <code>CascaderProps</code>.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>props</td><td>configuration options, see the following <code>CascaderProps</code> table.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr></tbody></table></div><h3 id="cascaderpanel-events" tabindex="-1">CascaderPanel Events <a class="header-anchor vp-link" href="#cascaderpanel-events" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td>change</td><td>triggers when the binding value changes</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>expand-change</td><td>triggers when expand option changes</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>close</td><td>close panel event, provided to Cascader to put away the panel judgment.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr></tbody></table></div><h3 id="cascaderpanel-slots" tabindex="-1">CascaderPanel Slots <a class="header-anchor vp-link" href="#cascaderpanel-slots" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Scope</th></tr></thead><tbody><tr><td>default</td><td>the custom content of cascader node, which are current Node object and node data respectively.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td></tr></tbody></table></div><h3 id="cascaderpanel-exposes" tabindex="-1">CascaderPanel Exposes <a class="header-anchor vp-link" href="#cascaderpanel-exposes" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td>getCheckedNodes</td><td>get an array of currently selected node,(leafOnly) whether only return the leaf checked nodes, default is <code>false</code></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>clearCheckedNodes</td><td>clear checked nodes</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr></tbody></table></div><h2 id="cascaderprops" tabindex="-1">CascaderProps <a class="header-anchor vp-link" href="#cascaderprops" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>expandTrigger</td><td>trigger mode of expanding options</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>click</td></tr><tr><td>multiple</td><td>whether multiple selection is enabled</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>checkStrictly</td><td>whether checked state of a node not affects its parent and child nodes</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>emitPath</td><td>when checked nodes change, whether to emit an array of node&#39;s path, if false, only emit the value of node.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>lazy</td><td>whether to dynamic load child nodes, use with <code>lazyload</code> attribute</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>lazyLoad</td><td>method for loading child nodes data, only works when <code>lazy</code> is true</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr><tr><td>value</td><td>specify which key of node object is used as the node&#39;s value</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>value</td></tr><tr><td>label</td><td>specify which key of node object is used as the node&#39;s label</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>label</td></tr><tr><td>children</td><td>specify which key of node object is used as the node&#39;s children</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>children</td></tr><tr><td>disabled</td><td>specify which key of node object is used as the node&#39;s disabled</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>disabled</td></tr><tr><td>leaf</td><td>specify which key of node object is used as the node&#39;s leaf field</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>leaf</td></tr><tr><td>hoverThreshold</td><td>hover threshold of expanding options</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span></td><td>500</td></tr></tbody></table></div><h2 id="type-declarations" tabindex="-1">Type Declarations <a class="header-anchor vp-link" href="#type-declarations" aria-hidden="true">#</a></h2><details><summary>Show declarations</summary><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">CascaderNodeValue</span> <span class="token operator">=</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span>
<span class="token keyword">type</span> <span class="token class-name">CascaderNodePathValue</span> <span class="token operator">=</span> CascaderNodeValue<span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">type</span> <span class="token class-name">CascaderValue</span> <span class="token operator">=</span>
  <span class="token operator">|</span> CascaderNodeValue
  <span class="token operator">|</span> CascaderNodePathValue
  <span class="token operator">|</span> <span class="token punctuation">(</span>CascaderNodeValue <span class="token operator">|</span> CascaderNodePathValue<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span>

<span class="token keyword">type</span> <span class="token class-name">Resolve</span> <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>

<span class="token keyword">type</span> <span class="token class-name">ExpandTrigger</span> <span class="token operator">=</span> <span class="token string">&#39;click&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;hover&#39;</span>

<span class="token keyword">type</span> <span class="token class-name">LazyLoad</span> <span class="token operator">=</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> Node<span class="token punctuation">,</span> resolve<span class="token operator">:</span> Resolve<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>

<span class="token keyword">type</span> <span class="token class-name">isDisabled</span> <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token operator">:</span> CascaderOption<span class="token punctuation">,</span> node<span class="token operator">:</span> Node<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span>

<span class="token keyword">type</span> <span class="token class-name">isLeaf</span> <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token operator">:</span> CascaderOption<span class="token punctuation">,</span> node<span class="token operator">:</span> Node<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span>

<span class="token keyword">interface</span> <span class="token class-name">CascaderOption</span> <span class="token keyword">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">unknown</span><span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
  label<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
  value<span class="token operator">?</span><span class="token operator">:</span> CascaderNodeValue
  children<span class="token operator">?</span><span class="token operator">:</span> CascaderOption<span class="token punctuation">[</span><span class="token punctuation">]</span>
  disabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
  leaf<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
<span class="token punctuation">}</span>

<span class="token keyword">interface</span> <span class="token class-name">CascaderProps</span> <span class="token punctuation">{</span>
  expandTrigger<span class="token operator">?</span><span class="token operator">:</span> ExpandTrigger
  multiple<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
  checkStrictly<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
  emitPath<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
  lazy<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
  lazyLoad<span class="token operator">?</span><span class="token operator">:</span> LazyLoad
  value<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
  label<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
  children<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
  disabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> isDisabled
  leaf<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> isLeaf
  hoverThreshold<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Node</span> <span class="token punctuation">{</span>
  <span class="token keyword">readonly</span> uid<span class="token operator">:</span> <span class="token builtin">number</span>
  <span class="token keyword">readonly</span> level<span class="token operator">:</span> <span class="token builtin">number</span>
  <span class="token keyword">readonly</span> value<span class="token operator">:</span> CascaderNodeValue
  <span class="token keyword">readonly</span> label<span class="token operator">:</span> <span class="token builtin">string</span>
  <span class="token keyword">readonly</span> pathNodes<span class="token operator">:</span> Node<span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token keyword">readonly</span> pathValues<span class="token operator">:</span> CascaderNodePathValue
  <span class="token keyword">readonly</span> pathLabels<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>

  childrenData<span class="token operator">:</span> ChildrenData
  children<span class="token operator">:</span> Node<span class="token punctuation">[</span><span class="token punctuation">]</span>
  text<span class="token operator">:</span> <span class="token builtin">string</span>
  loaded<span class="token operator">:</span> <span class="token builtin">boolean</span>
  <span class="token comment">/**
   * Is it checked
   *
   * @default false
   */</span>
  checked<span class="token operator">:</span> <span class="token builtin">boolean</span>
  <span class="token comment">/**
   * Used to indicate the intermediate state of unchecked and fully checked child nodes
   *
   * @default false
   */</span>
  indeterminate<span class="token operator">:</span> <span class="token builtin">boolean</span>
  <span class="token comment">/**
   * Loading Status
   *
   * @default false
   */</span>
  loading<span class="token operator">:</span> <span class="token builtin">boolean</span>

  <span class="token comment">// getter</span>
  isDisabled<span class="token operator">:</span> <span class="token builtin">boolean</span>
  isLeaf<span class="token operator">:</span> <span class="token builtin">boolean</span>
  valueByOption<span class="token operator">:</span> CascaderNodeValue <span class="token operator">|</span> CascaderNodePathValue

  <span class="token comment">// method</span>
  <span class="token function">appendChild</span><span class="token punctuation">(</span>childData<span class="token operator">:</span> CascaderOption<span class="token punctuation">)</span><span class="token operator">:</span> Node
  <span class="token function">calcText</span><span class="token punctuation">(</span>allLevels<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span> separator<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span>
  <span class="token function">broadcast</span><span class="token punctuation">(</span>event<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
  <span class="token function">emit</span><span class="token punctuation">(</span>event<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
  <span class="token function">onParentCheck</span><span class="token punctuation">(</span>checked<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
  <span class="token function">onChildCheck</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
  <span class="token function">setCheckState</span><span class="token punctuation">(</span>checked<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
  <span class="token function">doCheck</span><span class="token punctuation">(</span>checked<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
<span class="token punctuation">}</span>

Node <span class="token keyword">as</span> CascaderNode
</code></pre></div></details><h2 id="source" tabindex="-1">Source <a class="header-anchor vp-link" href="#source" aria-hidden="true">#</a></h2><p><a href="https://github.com/element-plus/element-plus/tree/dev/packages/components/cascader" class="vp-link" target="_blank" rel="noopener noreferrer">Component<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> • <a href="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/cascader.md" class="vp-link" target="_blank" rel="noopener noreferrer">Docs<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor vp-link" href="#contributors" aria-hidden="true">#</a></h2><div class="mb-4" data-v-2c2cd08f><div class="flex flex-wrap gap-4 pt-2" data-v-2c2cd08f><!--[--><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/sxzz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6481596?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 三咲智子<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/YunYouJun" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/25154432?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 云游君<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/jw-foss" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/15975785?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Jeremy<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/btea" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/24516654?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> btea<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/chenxch" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23251408?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Xc<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/holazz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23100055?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> zz<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Alanscut" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/21104054?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Alan Wang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/xiaoxian521" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/44761321?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 啝裳<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/tolking" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23313167?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> qiang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/emojiiii" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30518686?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> C.Y.Kun<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/SimonaliaChen" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/36978416?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Simona<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/warmthsea" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/45450994?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> sea / 神秘海<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/MrWeilian" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30046649?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 井柏然<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/sleepyShen1989" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/109908413?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> sleepyShen1989<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Tsong-LC" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/50739490?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> LIUCHAO<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/ryuhangyeong" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/27342882?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 류한경<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/gjfei" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/33827314?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> gjfei<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/purepear" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/144010?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Delyan Haralanov<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/msidolphin" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/26672484?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> msidolphin<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/kooriookami" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/38392315?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> kooriookami<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/chenweiyi" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/15872986?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> chenweiyi<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/makedopamine" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/93767616?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> dopamine<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/xiaochenchen-igg-com" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/169252980?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Xc<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/sechi747" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/73569598?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> sechi<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/HeftyKoo" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/10278227?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Hefty<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/CarterLi" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6134068?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Carter Li<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/opengraphica" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/57385187?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> opengraphica<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/anflower" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/62927479?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 张奎安<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/HerringtonDarkholme" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/2883231?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Herrington Darkholme<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/imswk" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23303044?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> SongWuKong<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/adaex" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/29560987?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Aex<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/bchen1029" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/39672197?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> bchen1029<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/plainheart" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/26999792?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Zhongxiang Wang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/nieyuyao" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/17698194?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Yuyao Nie<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Chris-Kin" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/10802869?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> on the field of hope<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Hades-li" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/12124478?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Hades-li<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/yeonjulee1005" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/57179957?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Dewdew<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/wzc520pyfm" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/69044080?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> wzc520pyfm<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/kaine0923" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/121680374?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Kaine<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/acyza" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/101238421?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> acyza<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/loosheng" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30114549?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> LooSheng<!--]--><!----></a></div><!--]--></div></div></div></div><footer class="page-footer" data-v-3e2f3e7f><div class="edit" data-v-3e2f3e7f><div class="edit-link" data-v-3e2f3e7f data-v-7d4aa2c8><a class="link text-sm" href="https://github.com/element-plus/element-plus/edit/dev/docs/en-US/component/cascader.md" target="_blank" rel="noopener noreferrer" data-v-7d4aa2c8>Edit this page on GitHub <i class="el-icon" style="font-size:16px;vertical-align:text-top;line-height:24px;" data-v-7d4aa2c8><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-7d4aa2c8><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg><!--]--></i></a></div></div></footer><div class="next-and-prev-link" data-v-8ad25866><div class="container" data-v-8ad25866><div class="prev" data-v-8ad25866><a class="link" href="/en-US/component/autocomplete" data-v-8ad25866><i class="el-icon mr-1" style="" data-v-8ad25866><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-8ad25866><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i><span class="text" data-v-8ad25866>Autocomplete</span></a></div><div class="next" data-v-8ad25866><a class="link" href="/en-US/component/checkbox" data-v-8ad25866><span class="text" data-v-8ad25866>Checkbox</span><i class="el-icon ml-1" style="" data-v-8ad25866><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-8ad25866><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i></a></div></div></div></div><aside class="toc-wrapper" data-v-6f13b908><nav class="toc-content" data-v-6f13b908><h3 class="toc-content__heading" data-v-6f13b908>Contents</h3><!----><p class="text-14px font-300 color-$text-color-secondary" data-v-6f13b908>Sponsored by</p><div class="join sponsors-button mt-4 w-100%" data-v-6f13b908><!--[--><a href="mailto:element-plus@outlook.com" target="_blank" class="el-tooltip__trigger"><button ariadisabled="false" type="button" class="el-button" style="overflow:hidden;"><!--v-if--><span class=""><!--[-->Become a Sponsor!<!--]--></span></button></a><!--teleport start--><!--teleport end--><!--]--></div><div class="right-big" data-v-6f13b908 data-v-1a999eaa><!--[--><a href="http://github.crmeb.net/u/Element?from=element-plus" title="CRMEB - 高品质开源商城系统 累计服务40W+开发者" target="_blank" data-v-1a999eaa><div class="flex bg-#F9F9F9 h-64px rd-4px justify-center items-center" data-v-1a999eaa><div class="h-36px" data-v-1a999eaa><img class="rd-4px h-full" src="/images/sponsors/CRMEB-l.png" alt="CRMEB" data-v-1a999eaa></div></div></a><!--]--></div><div class="flex flex-wrap justify-between right-small" data-v-6f13b908 data-v-1e0a70fc><!--[--><!--[--><a href="https://doc.buildadmin.com/?from=element-plus" title="BuildAdmin - Vue3企业级开源后台管理系统" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/sponsors/buildadmin-l.png" alt="BuildAdmin" data-v-1e0a70fc></div></a><!--]--><!--[--><a href="http://www.i-renderer.love/home/index" title="百搭云 - 快速且优雅的低代码平台" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/sponsors/baidayun.png" alt="百搭云" data-v-1e0a70fc></div></a><!--]--><!--[--><a href="https://bit.dev/?from=element-ui" title="bit - Share Code" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/bit-l.png" alt="bit" data-v-1e0a70fc></div></a><!--]--><!--[--><div class="flex bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><div class="color-#ddd text-13px cursor-default" data-v-1e0a70fc>Your logo</div></div><!--]--><!--]--></div><div class="right-rich" data-v-6f13b908 data-v-84253628><!--[--><!--]--></div></nav></aside></div><footer class="footer"><div class="footer-main"><h4>Links</h4><a href="https://github.com/element-plus/element-plus" class="footer-main-link" target="_blank">GitHub</a><a href="https://cn.element-plus.org/zh-CN/" class="footer-main-link" target="_blank">China Mirror 🇨🇳</a><a href="https://github.com/element-plus/element-plus/releases" class="footer-main-link" target="_blank">Changelog</a><a href="https://element.eleme.io/" class="footer-main-link" target="_blank">Element UI for Vue 2</a></div><div class="footer-main"><h4>Community</h4><a href="https://discord.com/invite/gXK9XNzW3X" class="footer-main-link" target="_blank">Discord</a><a href="https://github.com/element-plus/element-plus/issues" class="footer-main-link" target="_blank">Feedback</a><a href="https://github.com/element-plus/element-plus/blob/dev/.github/CONTRIBUTING.en-US.md" class="footer-main-link" target="_blank">Contribution</a><a href="https://segmentfault.com/t/element-plus" class="footer-main-link" target="_blank">SegmentFault</a></div></footer></main><!----></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"en-us_component_affix.md\":\"ff7dffa4\",\"en-us_component_alert.md\":\"cd5a1e5a\",\"en-us_component_anchor.md\":\"9a48cc9f\",\"en-us_component_autocomplete.md\":\"0f589547\",\"en-us_component_avatar.md\":\"02c0aba6\",\"en-us_component_backtop.md\":\"7b0c1932\",\"en-us_component_badge.md\":\"002e14a4\",\"en-us_component_border.md\":\"1ca6f965\",\"en-us_component_breadcrumb.md\":\"2ef63731\",\"en-us_component_button.md\":\"1063d204\",\"en-us_component_calendar.md\":\"eb9d1675\",\"en-us_component_card.md\":\"39e55f42\",\"en-us_component_carousel.md\":\"32115767\",\"en-us_component_cascader.md\":\"bf8dbc75\",\"en-us_component_checkbox.md\":\"98dc0f53\",\"en-us_component_collapse.md\":\"67a5c313\",\"en-us_component_color-picker.md\":\"50cd4caa\",\"en-us_component_color.md\":\"29417b31\",\"en-us_component_config-provider.md\":\"3463b447\",\"en-us_component_container.md\":\"85e4bdf3\",\"en-us_component_date-picker.md\":\"68c06f9e\",\"en-us_component_datetime-picker.md\":\"b999a872\",\"en-us_component_descriptions.md\":\"339dc63b\",\"en-us_component_dialog.md\":\"2cf8cf86\",\"en-us_component_divider.md\":\"421eb5f2\",\"en-us_component_drawer.md\":\"024b53e9\",\"en-us_component_dropdown.md\":\"7ac24bed\",\"en-us_component_empty.md\":\"29b5b47b\",\"en-us_component_form.md\":\"7458dbb1\",\"en-us_component_icon.md\":\"3426aa0f\",\"en-us_component_image.md\":\"ac3532a8\",\"en-us_component_infinite-scroll.md\":\"4c6f7159\",\"en-us_component_input-number.md\":\"a5c4cb11\",\"en-us_component_input.md\":\"c16e2da7\",\"en-us_component_layout.md\":\"2b2af71d\",\"en-us_component_link.md\":\"d30a5d74\",\"en-us_component_loading.md\":\"c6e5ea76\",\"en-us_component_menu.md\":\"e0e7d7ac\",\"en-us_component_message-box.md\":\"fc32bd92\",\"en-us_component_message.md\":\"cd41cb05\",\"en-us_component_notification.md\":\"56a6f299\",\"en-us_component_overview.md\":\"110e854b\",\"en-us_component_page-header.md\":\"38a29a2d\",\"en-us_component_pagination.md\":\"fe79df34\",\"en-us_component_popconfirm.md\":\"503fa4ae\",\"en-us_component_popover.md\":\"e14a3c24\",\"en-us_component_progress.md\":\"3b77a4ca\",\"en-us_component_radio.md\":\"95514d81\",\"en-us_component_rate.md\":\"3ed19909\",\"en-us_component_result.md\":\"081f424e\",\"en-us_component_scrollbar.md\":\"9562ac05\",\"en-us_component_segmented.md\":\"43777257\",\"en-us_component_select-v2.md\":\"8273ca64\",\"en-us_component_select.md\":\"6dfded09\",\"en-us_component_skeleton.md\":\"e5852963\",\"en-us_component_slider.md\":\"16325e17\",\"en-us_component_space.md\":\"3f2861d9\",\"en-us_component_statistic.md\":\"2a66f18b\",\"en-us_component_steps.md\":\"c0c48d3f\",\"en-us_component_switch.md\":\"bc045b26\",\"en-us_component_table-v2.md\":\"2105af2e\",\"en-us_component_table.md\":\"f8c35834\",\"en-us_component_tabs.md\":\"f908f1e5\",\"en-us_component_tag.md\":\"77cd984c\",\"en-us_component_text.md\":\"1580f3e6\",\"en-us_component_time-picker.md\":\"84d6f56c\",\"en-us_component_time-select.md\":\"be608e21\",\"en-us_component_timeline.md\":\"186bed11\",\"en-us_component_tooltip-v2.md\":\"a6daced0\",\"en-us_component_tooltip.md\":\"231fba09\",\"en-us_component_tour.md\":\"837136bc\",\"en-us_component_transfer.md\":\"91a8f888\",\"en-us_component_tree-select.md\":\"5479b050\",\"en-us_component_tree-v2.md\":\"9dc2154b\",\"en-us_component_tree.md\":\"955130e4\",\"en-us_component_typography.md\":\"daf0375f\",\"en-us_component_upload.md\":\"d9accc95\",\"en-us_component_watermark.md\":\"443e8fcb\",\"en-us_guide_changelog.md\":\"3c084145\",\"en-us_guide_commit-examples.md\":\"cc45ed9c\",\"en-us_guide_dark-mode.md\":\"9256892d\",\"en-us_guide_design.md\":\"eac1a1f4\",\"en-us_guide_dev-faq.md\":\"cf746748\",\"en-us_guide_dev-guide.md\":\"d06336e2\",\"en-us_guide_i18n.md\":\"bd361557\",\"en-us_guide_installation.md\":\"85f92b17\",\"en-us_guide_migration.md\":\"0c9aab31\",\"en-us_guide_namespace.md\":\"6affb523\",\"en-us_guide_nav.md\":\"725829ca\",\"en-us_guide_quickstart.md\":\"27523655\",\"en-us_guide_ssr.md\":\"44fd7343\",\"en-us_guide_theming.md\":\"ae3aa2cd\",\"en-us_guide_transitions.md\":\"270de32e\",\"en-us_guide_translation.md\":\"eaabac54\",\"en-us_index.md\":\"2d298cdd\",\"en-us_resource_index.md\":\"34f01ea5\",\"es-es_component_affix.md\":\"6a1bdcbe\",\"es-es_component_alert.md\":\"aa7f77f7\",\"es-es_component_anchor.md\":\"763d2056\",\"es-es_component_autocomplete.md\":\"c422535c\",\"es-es_component_avatar.md\":\"391d791e\",\"es-es_component_backtop.md\":\"97c778cd\",\"es-es_component_badge.md\":\"d4198a37\",\"es-es_component_border.md\":\"c4431903\",\"es-es_component_breadcrumb.md\":\"d8545b03\",\"es-es_component_button.md\":\"e539188f\",\"es-es_component_calendar.md\":\"f682be1c\",\"es-es_component_card.md\":\"4d07a461\",\"es-es_component_carousel.md\":\"5f248bd0\",\"es-es_component_cascader.md\":\"f1da98ff\",\"es-es_component_checkbox.md\":\"e9665537\",\"es-es_component_collapse.md\":\"63f23fe8\",\"es-es_component_color-picker.md\":\"35223bc5\",\"es-es_component_color.md\":\"ecf66faa\",\"es-es_component_config-provider.md\":\"62ac5005\",\"es-es_component_container.md\":\"5844a08e\",\"es-es_component_date-picker.md\":\"a8755dbd\",\"es-es_component_datetime-picker.md\":\"445a7fe9\",\"es-es_component_descriptions.md\":\"7a88f91a\",\"es-es_component_dialog.md\":\"dcf50de9\",\"es-es_component_divider.md\":\"6f5b07f5\",\"es-es_component_drawer.md\":\"140c918c\",\"es-es_component_dropdown.md\":\"bcce96bc\",\"es-es_component_empty.md\":\"ccd86c17\",\"es-es_component_form.md\":\"f61ce21a\",\"es-es_component_icon.md\":\"50ac8e2d\",\"es-es_component_image.md\":\"8df18281\",\"es-es_component_infinite-scroll.md\":\"4419ba97\",\"es-es_component_input-number.md\":\"f8e08c67\",\"es-es_component_input.md\":\"c22c21f5\",\"es-es_component_layout.md\":\"787b2ad6\",\"es-es_component_link.md\":\"a79dfebf\",\"es-es_component_loading.md\":\"ae2cc3a8\",\"es-es_component_menu.md\":\"0adc6293\",\"es-es_component_message-box.md\":\"285f035c\",\"es-es_component_message.md\":\"b523dd42\",\"es-es_component_notification.md\":\"a0c9ea84\",\"es-es_component_overview.md\":\"5c7beefe\",\"es-es_component_page-header.md\":\"fbdbe268\",\"es-es_component_pagination.md\":\"6d21ed8c\",\"es-es_component_popconfirm.md\":\"944cf7f2\",\"es-es_component_popover.md\":\"c5c82a9d\",\"es-es_component_progress.md\":\"09e7e5fa\",\"es-es_component_radio.md\":\"7e9e6292\",\"es-es_component_rate.md\":\"8b333a70\",\"es-es_component_result.md\":\"403b624b\",\"es-es_component_scrollbar.md\":\"b9593bab\",\"es-es_component_segmented.md\":\"64c094d9\",\"es-es_component_select-v2.md\":\"95c9a85e\",\"es-es_component_select.md\":\"692b62a4\",\"es-es_component_skeleton.md\":\"0e6b07c4\",\"es-es_component_slider.md\":\"8e33f911\",\"es-es_component_space.md\":\"1b2a1f23\",\"es-es_component_statistic.md\":\"152a0721\",\"es-es_component_steps.md\":\"2d5805b7\",\"es-es_component_switch.md\":\"d44665e8\",\"es-es_component_table-v2.md\":\"84df4bd5\",\"es-es_component_table.md\":\"18789f35\",\"es-es_component_tabs.md\":\"d72771ad\",\"es-es_component_tag.md\":\"43e81918\",\"es-es_component_text.md\":\"1fcfb5cb\",\"es-es_component_time-picker.md\":\"bf4c067e\",\"es-es_component_time-select.md\":\"92f79417\",\"es-es_component_timeline.md\":\"4c2ff30c\",\"es-es_component_tooltip-v2.md\":\"8b8acbad\",\"es-es_component_tooltip.md\":\"4991646a\",\"es-es_component_tour.md\":\"11bc9eff\",\"es-es_component_transfer.md\":\"e8315055\",\"es-es_component_tree-select.md\":\"8481ec73\",\"es-es_component_tree-v2.md\":\"1f8e11fe\",\"es-es_component_tree.md\":\"13b0bb92\",\"es-es_component_typography.md\":\"9270c5de\",\"es-es_component_upload.md\":\"574f8475\",\"es-es_component_watermark.md\":\"5430e1d8\",\"es-es_guide_changelog.md\":\"1a5b87b0\",\"es-es_guide_commit-examples.md\":\"e6a58951\",\"es-es_guide_dark-mode.md\":\"85f904cf\",\"es-es_guide_design.md\":\"dd162f49\",\"es-es_guide_dev-faq.md\":\"7c4ae8da\",\"es-es_guide_dev-guide.md\":\"3ae1c952\",\"es-es_guide_i18n.md\":\"2118baa5\",\"es-es_guide_installation.md\":\"95803516\",\"es-es_guide_migration.md\":\"3f132e7e\",\"es-es_guide_namespace.md\":\"9856f155\",\"es-es_guide_nav.md\":\"63349cda\",\"es-es_guide_quickstart.md\":\"b1ad1aef\",\"es-es_guide_ssr.md\":\"791df483\",\"es-es_guide_theming.md\":\"97ccf28e\",\"es-es_guide_transitions.md\":\"29cf69a4\",\"es-es_guide_translation.md\":\"5bcefea4\",\"es-es_index.md\":\"1c9a711f\",\"es-es_resource_index.md\":\"f1abbb68\",\"index.md\":\"fe916efd\",\"zh-cn_component_affix.md\":\"cf647355\",\"zh-cn_component_alert.md\":\"eca392e8\",\"zh-cn_component_anchor.md\":\"7a786896\",\"zh-cn_component_autocomplete.md\":\"0fde91c7\",\"zh-cn_component_avatar.md\":\"ba24b56b\",\"zh-cn_component_backtop.md\":\"460d34db\",\"zh-cn_component_badge.md\":\"681178b5\",\"zh-cn_component_border.md\":\"87fc466a\",\"zh-cn_component_breadcrumb.md\":\"535bd42c\",\"zh-cn_component_button.md\":\"4128e583\",\"zh-cn_component_calendar.md\":\"d680314d\",\"zh-cn_component_card.md\":\"0f0f5afe\",\"zh-cn_component_carousel.md\":\"f902fc9f\",\"zh-cn_component_cascader.md\":\"c569aa5b\",\"zh-cn_component_checkbox.md\":\"54316312\",\"zh-cn_component_collapse.md\":\"26965384\",\"zh-cn_component_color-picker.md\":\"5f013e2e\",\"zh-cn_component_color.md\":\"b37f2def\",\"zh-cn_component_config-provider.md\":\"7e48316b\",\"zh-cn_component_container.md\":\"43636a70\",\"zh-cn_component_date-picker.md\":\"0217cca1\",\"zh-cn_component_datetime-picker.md\":\"60d69e0b\",\"zh-cn_component_descriptions.md\":\"6a2c5fcc\",\"zh-cn_component_dialog.md\":\"ba52e130\",\"zh-cn_component_divider.md\":\"639191e5\",\"zh-cn_component_drawer.md\":\"3a0bf571\",\"zh-cn_component_dropdown.md\":\"fa84f7c5\",\"zh-cn_component_empty.md\":\"c7635b32\",\"zh-cn_component_form.md\":\"d52ec6dc\",\"zh-cn_component_icon.md\":\"0487a8b6\",\"zh-cn_component_image.md\":\"9c120e45\",\"zh-cn_component_infinite-scroll.md\":\"38f46d39\",\"zh-cn_component_input-number.md\":\"8a71ee3f\",\"zh-cn_component_input.md\":\"d35eeb9c\",\"zh-cn_component_layout.md\":\"bc675fd0\",\"zh-cn_component_link.md\":\"89225971\",\"zh-cn_component_loading.md\":\"c9fae5ab\",\"zh-cn_component_menu.md\":\"bc7746a1\",\"zh-cn_component_message-box.md\":\"cb16e084\",\"zh-cn_component_message.md\":\"8be6a0d4\",\"zh-cn_component_notification.md\":\"002c9ad3\",\"zh-cn_component_overview.md\":\"3c3503ad\",\"zh-cn_component_page-header.md\":\"f1153fa0\",\"zh-cn_component_pagination.md\":\"7e316c0d\",\"zh-cn_component_popconfirm.md\":\"c8c261e8\",\"zh-cn_component_popover.md\":\"33396fe1\",\"zh-cn_component_progress.md\":\"a45ad1c6\",\"zh-cn_component_radio.md\":\"8d6a36fc\",\"zh-cn_component_rate.md\":\"b9374d23\",\"zh-cn_component_result.md\":\"da3ebb19\",\"zh-cn_component_scrollbar.md\":\"ed75c308\",\"zh-cn_component_segmented.md\":\"e983c8d7\",\"zh-cn_component_select-v2.md\":\"67dccf39\",\"zh-cn_component_select.md\":\"6d3c3517\",\"zh-cn_component_skeleton.md\":\"f43e715e\",\"zh-cn_component_slider.md\":\"a4306965\",\"zh-cn_component_space.md\":\"a3738b82\",\"zh-cn_component_statistic.md\":\"5bf4a0ca\",\"zh-cn_component_steps.md\":\"268b6c0d\",\"zh-cn_component_switch.md\":\"fee6f016\",\"zh-cn_component_table-v2.md\":\"7351c605\",\"zh-cn_component_table.md\":\"191078c2\",\"zh-cn_component_tabs.md\":\"43ccd873\",\"zh-cn_component_tag.md\":\"3243911c\",\"zh-cn_component_text.md\":\"e78046cb\",\"zh-cn_component_time-picker.md\":\"c889f795\",\"zh-cn_component_time-select.md\":\"9037b9bc\",\"zh-cn_component_timeline.md\":\"31c1d81c\",\"zh-cn_component_tooltip-v2.md\":\"7d03850d\",\"zh-cn_component_tooltip.md\":\"a254e320\",\"zh-cn_component_tour.md\":\"c2d42a56\",\"zh-cn_component_transfer.md\":\"f9d17f68\",\"zh-cn_component_tree-select.md\":\"be190e71\",\"zh-cn_component_tree-v2.md\":\"33e2a835\",\"zh-cn_component_tree.md\":\"c0d917d7\",\"zh-cn_component_typography.md\":\"958c01ce\",\"zh-cn_component_upload.md\":\"5e3a45cf\",\"zh-cn_component_watermark.md\":\"709c9962\",\"zh-cn_guide_changelog.md\":\"006e3eb8\",\"zh-cn_guide_commit-examples.md\":\"470a0272\",\"zh-cn_guide_dark-mode.md\":\"a8280f1d\",\"zh-cn_guide_design.md\":\"ecdfbc64\",\"zh-cn_guide_dev-faq.md\":\"3f406323\",\"zh-cn_guide_dev-guide.md\":\"fc4f7b58\",\"zh-cn_guide_i18n.md\":\"2bd9c6ed\",\"zh-cn_guide_installation.md\":\"8dda845f\",\"zh-cn_guide_migration.md\":\"152c0c06\",\"zh-cn_guide_namespace.md\":\"1489fc56\",\"zh-cn_guide_nav.md\":\"c82ea1cc\",\"zh-cn_guide_quickstart.md\":\"598a5162\",\"zh-cn_guide_ssr.md\":\"1faa6801\",\"zh-cn_guide_theming.md\":\"22b9a49a\",\"zh-cn_guide_transitions.md\":\"b40dd547\",\"zh-cn_guide_translation.md\":\"87f8e34c\",\"zh-cn_index.md\":\"209bfa3f\",\"zh-cn_resource_index.md\":\"07b05f83\"}")</script>
    <script type="module" async src="/assets/app.9c6c24e4.js"></script>
    
  </body>
</html>